<template>
  <div class="big-box">
    <div class="controler-container">
      <!-- 左侧菜单栏 -->
    <div class="controler-icon">
      <el-tooltip class="item" effect="dark" content="返回最初视角" placement="right">
        <i class="el-icon-s-home" @click="flyToHome"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="GIS分析工具" placement="right">
        <i class="el-icon-coordinate" @click="showGisTools"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="场景特效" placement="right">
        <i class="el-icon-light-rain" @click="showRain"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="工程管理" placement="right">
        <i class="el-icon-menu" @click="showLayerControler"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="历史工程" placement="right">
        <i class="el-icon-date" @click="showHistory"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="模拟飞行" placement="right">
        <i class="el-icon-s-promotion" @click="showVisual"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="工具箱" placement="right">
        <i class="el-icon-suitcase-1" @click="showMeasureTools"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="卷帘对比" placement="right">
        <i class="el-icon-set-up" @click="showContrast();initContrast()"></i>
      </el-tooltip>
    </div>
    <!-- 右侧水利设施 -->
    <div class="facilities">
      <i class="el-icon-location-outline"></i>
      <p>水利设施</p>
    </div>
      <!-- 右侧流域水位 -->
      <div class="water-level">
        <i class="el-icon-ship"></i>
        <p>流域水位</p>
      </div>
    </div>
    <!-- 层图层管理 -->
    <div class="layer-controler-container" v-if="islayerControlerShow">
      <div class="layer-controler-container-top">
        <div class="top">
        <p>工程管理</p>
        <i class="el-icon-close" @click="showLayerControler"></i>
      </div>
      </div>
      <!-- 图层item项 -->
      <div class="bottom">
        <!-- 工程信息 -->
        <div class="layer-items">
          <div class="layer-items-top">
            基本信息
          </div>
          <div class="layer-items-bottom">
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_2" fill="#60cdad" class="layer-item-icon" @change="showEntity">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToEntity">
                施工详情
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.scopeLine" fill="#60cdad" class="layer-item-icon" @change="changeScopeLine">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToScopeLine">
                项目段
              </div>
            </div>
            <div class="layer-item">
                <el-checkbox v-model="layerChcked.layer_14" fill="#60cdad" class="layer-item-icon" @change="changeShiliang">
                  <i class="el-icon-document-copy"></i>
                </el-checkbox>
                <div class="layer-item-text" @click="flyToShiliang">
                  矢量注记图层
                </div>
            </div>
            <div class="layer-item">
                <el-checkbox v-model="layerChcked.layer_16" fill="#60cdad" class="layer-item-icon" @change="changeChaoYang">
                  <i class="el-icon-document-copy"></i>
                </el-checkbox>
                <div class="layer-item-text" @click="flyToChaoYang">
                  倾斜模型
                </div>
            </div>
            <div class="layer-item">
                <el-checkbox v-model="layerChcked.video_1" fill="#60cdad" class="layer-item-icon" @change="showVideo_1">
                  <i class="el-icon-document-copy"></i>
                </el-checkbox>
                <div class="layer-item-text" @click="flyToVideo_1">
                  施工动画模拟
                </div>
            </div>
          </div>
        </div>
        <!-- 堤防工程 -->
        <div class="layer-items">
          <div class="layer-items-top">
            堤防工程
          </div>
          <div class="layer-items-bottom">
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_1" fill="#60cdad" class="layer-item-icon" @change="showYanShui">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToBasic">
                衍水大桥至溪湖桥堤防加固
              </div>
            </div>
          </div>
          <div class="layer-item">
            <el-checkbox v-model="layerChcked.layer_4" fill="#60cdad" class="layer-item-icon" @change="showXiHuHeKou">
              <i class="el-icon-document-copy" ></i>
            </el-checkbox>
            <div class="layer-item-text" @click="flyToXiHuHeKou">
              溪湖河口上游堤防加固
            </div>
          </div>
          <div class="layer-item">
            <el-checkbox v-model="layerChcked.layer_11" fill="#60cdad" class="layer-item-icon" @change="showHeJinGou">
              <i class="el-icon-document-copy"></i>
            </el-checkbox>
            <div class="layer-item-text" @click="flyToHeJinGou">
              合金沟两岸新建回水堤
            </div>
          </div>
          <div class="layer-item">
            <el-checkbox v-model="layerChcked.layer_13" fill="#60cdad" class="layer-item-icon" @change="showBinHeNanLu">
              <i class="el-icon-document-copy"></i>
            </el-checkbox>
            <div class="layer-item-text" @click="flyToBinHeNanLu">
              新建防洪墙
            </div>
          </div>
        </div>
        <!-- 护岸工程 -->
        <div class="layer-items">
          <div class="layer-items-top">
            护岸工程
          </div>
          <div class="layer-items-bottom">
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_3" fill="#60cdad" class="layer-item-icon" @change="showBenGang">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToBenGang">
                本钢厂区
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_5" fill="#60cdad" class="layer-item-icon" @change="showAiZhiTan">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToAiZhiTan">
                左岸爱之滩公园
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_12" fill="#60cdad" class="layer-item-icon" @change="showYuXiQiao">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToYuXiQiao">
                玉溪桥下游新建护脚
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_6" fill="#60cdad" class="layer-item-icon" @change="showXiaoPuGongYuan">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToXiaoPuGongYuan">
                左岸小堡公园护岸改造
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_10" fill="#60cdad" class="layer-item-icon" @change="showDanFu">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToDanFu">
                丹阜高速至威宁大桥段护岸改造
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_8" fill="#60cdad" class="layer-item-icon" @change="showYouAnXiaoPu">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToYouAnXiaoPu">
                右岸小堡拦河闸下游段护岸改造
              </div>
            </div>
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_15" fill="#60cdad" class="layer-item-icon" @change="showdayugou">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyTodayugou">
                支流大峪沟回水段护岸
              </div>
            </div>
          </div>
        </div>
        <div class="layer-items">
          <div class="layer-items-top">
            新建防汛抢险路工程
          </div>
          <div class="layer-items-bottom">
            <div class="layer-item">
              <el-checkbox v-model="layerChcked.layer_7" fill="#60cdad" class="layer-item-icon" @change="showWeiNing">
                <i class="el-icon-document-copy"></i>
              </el-checkbox>
              <div class="layer-item-text" @click="flyToWeiNing">
                新建威宁拦河闸防汛抢险路
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 飞行漫游 -->
    <div class="do-fly" v-if="isVisualShow" id="toolbar">
      <div class="fly-top">
        <span>模拟飞行</span>
        <i class="el-icon-close" @click="hideVisual"></i>
      </div>
      <div class="angle">
        <div class="fly-choose">
          <div class="choose-item">
            <span class="label-span">视角选择</span>
            <div class="fly-bottom">
              <el-radio-group v-model="visualAngle" class="labels" size="small">
                <el-radio label="1"  size="small" text-color="#60cdad" class="label-item" name="animationType">跟随视角</el-radio>
                <el-radio label="2" size="small" text-color="#60cdad" class="label-item" name="animationType">第一视角</el-radio>
                <el-radio label="3"  size="small" text-color="#60cdad" class="label-item" name="animationType">上帝视角</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="choose-item">
            <span class="label-span">模型选择</span>
            <div class="fly-bottom">
              <el-radio-group v-model="chooseModel" class="labels" size="small">
                <el-radio label="1"  size="small" text-color="#60cdad" class="label-item" name="animationType">无人机</el-radio>
                <el-radio label="2" size="small" text-color="#60cdad" class="label-item" name="animationType">飞船</el-radio>
                <el-radio label="3"  size="small" text-color="#60cdad" class="label-item" name="animationType">无</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
<!--        <div class="choose-speed">-->
<!--          <span class="label-span">速度选择</span>-->
<!--          <div class="fly-bottom">-->
<!--            <el-radio-group v-model="flySpeed" class="labels" size="small">-->
<!--              <el-radio label="2500"  size="small" text-color="#60cdad" class="label-item" name="animationType">快</el-radio>-->
<!--              <el-radio label="5000" size="small" text-color="#60cdad" class="label-item" name="animationType">默认</el-radio>-->
<!--              <el-radio label="8000"  size="small" text-color="#60cdad" class="label-item" name="animationType">慢</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
<!--        </div>-->
        <div class="choose-speed">
          <div class="fly-bottom">
            <el-button plain @click="showHistoryLine" class="el-button">选择历史路线</el-button>
          </div>
        </div>
        <div class="draw">
          <el-button plain @click="drawLineRoad" class="el-button">绘制</el-button>
          <el-button plain @click="clearFlyRoad" class="el-button">清除</el-button>
          <el-button plain @click="clearFlyRoad" class="el-button">暂停</el-button>
          <el-button plain @click="start" class="el-button" ref="flyBtn">开始</el-button>
        </div> 
      </div>
    </div>
    <!-- 测量工具箱 -->
    <MeasureTools
    v-if="isMeasureToolsShow"
    @hideMeasureTools="hideMeasureTools"
    ></MeasureTools>
    <!-- GIS分析工具箱 -->
    <div class="gis-tools" v-if="isgisToolsShow">
      <div class="gis-tools-top">
        <span class="gis-tools-span">GIS分析工具箱</span>
        <i class="el-icon-close" @click="hideGisTools"></i>
      </div>
      <div class="gistool-bottom">
        <div class="gistool-item" @click="showTongshifenxi">
          <i class="el-icon-video-camera-solid"></i>
          <span> 透视分析</span>
        </div>
        <div class="gistool-item" @click="openSkylineAnay">
          <i class="el-icon-sunrise-1"></i>
          <span> 天际线分析</span>
        </div>
        <div class="gistool-item" @click="doAnalyse(1)">
          <i class="el-icon-aim"></i>
          <span> 点缓冲分析</span>
        </div>
        <div class="gistool-item" @click="doAnalyse(2)">
          <i class="el-icon-minus"></i>
          <span> 线缓冲分析</span>
        </div>
        <div class="gistool-item" @click="doAnalyse(3)">
          <i class="el-icon-full-screen"></i>
          <span> 面缓冲分析</span>
        </div>
        <div class="gistool-item" @click="showContourLine">
          <i class="el-icon-help"></i>
          <span> 等高线分析</span>
        </div>
        <div class="gistool-item" @click="showExcavate">
          <i class="el-icon-picture-outline-round"></i>
          <span> 挖方分析</span>
        </div>
        <div class="gistool-item" @click="doSlope">
          <i class="el-icon-s-marketing"></i>
          <span> 坡向分析</span>
        </div>
        <div class="gistool-item" @click="takePic">
          <i class="el-icon-camera"></i>
          <span> 出图</span>
        </div>
        <div class="gistool-item" @click="clearGisAll">
          <i class="el-icon-s-open"></i>
          <span> 清除</span>
        </div>
        <div class="gistool-item" @click="clearGisAll" style="visibility: hidden;">
          <i class="el-icon-s-open"></i>
          <span> 清除</span>
        </div>
        <div class="gistool-item" @click="clearGisAll" style="visibility: hidden;">
          <i class="el-icon-s-open"></i>
          <span> 清除</span>
        </div>

      </div>
    </div>
    <!-- 缓冲面 -->
    <div class="analyse" v-if="isAnalyseShow">
      <div class="analys-top">
        <span>缓冲区分析</span>
        <i class="el-icon-close" @click="closeBufferAnalyse"></i>
      </div>
      <div class="analyse-bottom">
        <span>缓冲距离: </span>
        <el-input 
        type="number" 
        v-model="analyseScope" 
        class="analyse-input" 
        @blur="changeAnalyseScope" 
        ></el-input>
        <span> 米</span>
      </div>
    </div>
    <!-- 等高线分析 -->
    <div class="computedLine" v-if="isComputedLineShow">
      <div class="computedLine-top">
        <span class="computedLine-span">等高线分析</span>
        <i class="el-icon-close" @click="c"></i>
      </div>
      <div class="computedLine-bottom">
        <span>等高距 : </span>
        <div class="gap">
          <input type="number" v-model="separationDistance">
          <span> m</span>
        </div>
      </div>
      <div class="computedLine-btn">
        <div class="computedLine-btn-1" @click="contourLine">
          <span>生成</span>
        </div>
        <div class="computedLine-btn-1" @click="removeContourLine">
          <span>取消</span>
        </div>
      </div>
    </div>
    <!-- 透视分析 -->
    <div class="toushi-box" v-if="isToushiShow">
      <div class="toushi-top">
        <span class="toushi-span">透视分析</span>
        <i class="el-icon-close" @click="hideToushi"></i>
      </div>
      <div class="choose-box" @click="VisibilityAnalysis">
        <i class="el-icon-thumb"></i>
        <span ref="toushiBtn">   选择视点</span>
      </div>
      <div class="clear-all" @click="clearToushi">
        <i class="el-icon-scissors"></i>
        <span>   清除全部</span>
      </div>
    </div>
    <!-- 场景特效 -->
    <div class="weather" v-if="isShowRain">
      <div class="weather-top">
        <span class="weather-wenzi">场景特效</span>
        <i class="el-icon-close" @click="closeWeather"></i>
      </div>
      <div class="weather-bottom">
        <div class="weather-item" @click="showRains">
          <i class="el-icon-light-rain"></i>
          <span class="weather-xiaoguo">雨</span>
        </div>
        <div class="weather-item" @click="showSnow">
          <i class="el-icon-heavy-rain"></i>
          <span class="weather-xiaoguo">雪</span>
        </div>
        <div class="weather-item" @click="showFog">
          <i class="el-icon-sunset"></i>
          <span class="weather-xiaoguo">雾</span>
        </div>
        <!-- <div class="weather-item" @click="showFire">
          <i class="el-icon-magic-stick"></i>
          <span class="weather-xiaoguo">火焰</span>
        </div> -->
        <div class="weather-item"  @click="showLight">
          <i class="el-icon-sunrise"></i>
          <span class="weather-xiaoguo">光照模拟</span>
        </div>
        <div class="weather-item" @click="showNight">
          <i class="el-icon-moon"></i>
          <span class="weather-xiaoguo">昼夜交替</span>
        </div>
        <div class="weather-item" @click="destoryWeather">
          <i class="el-icon-s-open"></i>
          <span class="weather-xiaoguo">清除</span>
        </div>
        <div class="weather-item" @click="openSkylineAnay" style="visibility: hidden;">
          <i class="el-icon-sunrise-1"></i>
          <span class="weather-xiaoguo">天际线</span>
        </div>
      </div>
    </div>
    <!-- 卷帘对比 -->
    <div class="contrast" v-if="isShowContrast">
      <div class="contrast-top">
        <span class="contrast-wenzi">卷帘对比</span>
        <i class="el-icon-close" @click="closeContrast"></i>
      </div> 
      <div class="contrast-bottom">
        <div class="contrast-bottom-item">
          <span>左侧图层：</span>
          <el-select v-model="option1" placeholder="请选择图层" class="el-option" @change="changeLayerLeft">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="contrast-bottom-item">
          <span>右侧图层：</span>
          <el-select v-model="option2" placeholder="请选择图层" class="el-option" @change="changeLayerRight">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div id="slider"></div>
    <!-- 坡向分析echarts容器和关闭btn -->
    <div class="closePoXiang" v-if="isEchartsShow" @click="clearEcharts">
      <i class="el-icon-close"></i>
    </div>
    <div id="echarts" style="visibility: hidden;">
      <div id="echarts-container"></div>
    </div>
    <!-- 挖方分析 -->
    <div class="fut-fill-tools" v-if="isWaShow">
      <i class="el-icon-close" @click="closeWaFang"></i>
      <div class="tools-param">
        <span>
          高度值：
          <el-input size="mini" type="number" v-model="height"></el-input>
        </span>
        <span>
          精度：
          <el-input size="mini" type="number" v-model="precision"></el-input>
        </span>
      </div>
      <el-button size="mini" @click="drawBoundary">绘制区域</el-button>
      <div class="tool-result">
        <span>
          总分析面积(㎡)
          <el-input size="mini" v-model="result.allArea"></el-input>
        </span>
        <span>
          填方面积(㎡)
          <el-input size="mini" v-model="result.fillArea"></el-input>
        </span>
        <span>
          填方体积(m³)
          <el-input size="mini" v-model="result.fillVolume"></el-input>
        </span>
        <span>
          挖方面积(㎡)
          <el-input size="mini" v-model="result.cutArea"></el-input>
        </span>
        <span>
          挖方体积(m³)
          <el-input size="mini" v-model="result.cutVolume"></el-input>
        </span>
        <span>
          无须填挖面积(㎡)
          <el-input size="mini" v-model="result.noArea"></el-input>
        </span>
      </div>
    </div>
    <!-- 视频 -->
    <div class="video-player" v-if="isVideoShow"> 
      <div class="video-top">
        <i class="el-icon-close" @click="closeVideo"></i>
      </div>
      <div class="videos">
        <video src="@/assets/images/video.mp4" controls ref="vueRef"></video>
      </div>
    </div>
    <History  v-show="isHistoryProjectShow" @hiddenHistory="hiddenHistoryProject"></History>
    <historyLine v-if="isOldLineShow" @closeHistory = "closeHistory"></historyLine>
  </div>
</template>

<script>
// 引入组件
import { GlobeTooltip } from '@/utils/GlobeTooltip'
import MeasureTools from './MeasureTools.vue';
import History from '@/components/HomePage/HistoryProject.vue'
import historyLine from '@/components/HomePage/historyLine.vue'
import global from '@/views/Global.vue'
import VisibilityAnalysisClass from '@/utils/VisibilityAnalysis.js'
import coverage from '@/mixins/addcCoverages.js'
import get from '@/mixins/getInfo'
import fire from '@/mixins/particle.js'
import analyse from '@/mixins/analyse'
import addVideos from '@/mixins/addVideo.js'
import * as turf from '@turf/turf'
import CreatePolygon  from '@/utils/CreatePolygon.js'
import CutFillAnalysis  from '@/utils/CutFillAnalysis.js'
import {addPosition} from '@/api'
// 场景特效
import '@/static/lib/snow'
import '@/static/lib/rain'
import '@/static/lib/fog'
import firepic from '@/assets/images/fire.png'
export default {
  components:{MeasureTools,History,historyLine},
  mixins:[coverage,get,fire,analyse,addVideos],
  data() {
    return {
      // 控制图层选择框的显隐
      islayerControlerShow:false,
      // checkbox选择数据
      layerChcked:{
        layer_1:false,
        layer_2:false,
        layer_3:false,
        layer_4:false,
        layer_5:false,
        layer_6:false,
        layer_7:false,
        layer_8:false,
        layer_9:false,
        layer_10:false,
        layer_11:false,
        layer_12:false,
        layer_13:false,
        layer_14:false,
        layer_16:false,
        // 15：大峪沟
        layer_15:false,
        video_1:false,
        scopeLine:false,
        project2003:false,
        project2009:false,
        project2019:false,
        project20:false,
      },
      // 飞行漫游options
      visualAngle:"3",
      chooseModel:'1',
      flySpeed:'5000',
      // 控制飞行漫游面板展示
      isVisualShow:false,
      isStartFly:false,
      nowTime2:null,
      // 控制测量工具箱展示
      isMeasureToolsShow:false,
      lines : [],
      // 透视分析面板
      isToushiShow:false,
      // 天气特效
      isShowRain:false,
      // 卷帘对比
      isShowContrast:false,
      // 地图options
      options:[{
        value: 'moren',
        label: '高德矢量影像'
      },{
        value: 'gaodeshiliang',
        label: '高德影像'
      },{
        value:'gaodejiedao',
        label:'天地图街道注记'
      },{
        value:'baidu',
        label:'天地图影像'
      }],
      // 地图选择器
      option1:'',
      option2:'',
      leftLayer:null,
      rightLayer:null,
      map:null,
      sightline:null,
      // gis分析工具
      isgisToolsShow:false,
      // 等高线分析面板
      isComputedLineShow:false,
      // 等高距
      separationDistance:50,
      // echarts
      isEchartsShow:false,
      // 缓冲面面板
      isAnalyseShow:false,
      // 缓冲范围
      analyseScope:50,
      // 缓冲数组
      bufferArr : null,
      // 挖方
      height: 70,
      precision: 720,
      result: {
        allArea: "",
        cutArea: "",
        cutVolume: "",
        fillArea: "",
        fillVolume: "",
        noArea: "",
      },
      isWaShow:false,
      // 视频弹框
      isVideoShow:false,
      shiliang:null,
      // 范围线
      line1:null,
      line2:null,
      line3:null,
      board1:null,
      board2:null,
      board3:null,
      //region
      country:[
      124.14851, 41.311207, 
        124.143804, 41.311969, 
        124.141542, 41.313571, 
        124.134166, 41.313509, 
        124.128319, 41.313222, 
        124.123468, 41.315084, 
        124.114946, 41.318513, 
        124.110443, 41.320904, 
        124.108434, 41.322049, 
        124.104668, 41.322433, 
        124.100727, 41.322302, 
        124.094962, 41.322393, 
        124.089101, 41.323212, 
        124.082439, 41.324152, 
        124.0793, 41.324714, 
        124.075586, 41.322958,
        124.073317, 41.320287, 
        124.072501, 41.317805, 
        124.072599,41.317613, 
        124.071937, 41.315336, 
        124.075186, 41.313522, 
        124.079727, 41.312308, 
        124.094667, 41.311316, 
        124.099967, 41.309659, 
        124.100279, 41.307745, 
        124.09521, 41.304354,
        124.089079, 41.305027, 
        124.083547, 41.304306, 
        124.076908, 41.302221, 
        124.071436, 41.299714, 
        124.067211, 41.298069, 
        124.062588, 41.29923,      
        124.059633, 41.302731, 
        124.06036, 41.305846,      
        124.060225, 41.31193, 
        124.056985, 41.314571, 
        124.053461, 41.314489, 
        124.04988, 41.312389,      
        124.044248, 41.312597, 
        124.038616, 41.316376, 
        124.037489, 41.320359, 
        124.038094, 41.32333,     
        124.042265, 41.327786, 
        124.047629, 41.331842, 
        124.050825, 41.333663,         
        124.053051, 41.334958, 
        124.05355, 41.337816,      
        124.052271, 41.342814, 
        124.049913, 41.345802, 
        124.044368, 41.355553, 
        124.040711, 41.35951,      
        124.037691, 41.361039, 
        124.033625, 41.361123, 
        124.028376, 41.360006, 
        124.027054, 41.356018, 
        124.026984, 41.352731, 
        124.027886, 41.349741, 
        124.029815, 41.344941, 
        124.028913, 41.341909, 
        124.026583, 41.33956, 
        124.02364, 41.338158, 
        124.017899, 41.337757, 
        124.011584, 41.339035,         
        124.006905, 41.344769, 
        124.003465, 41.35106, 
        124.003569, 41.357375,         
        124.007237, 41.361979, 
        124.013675, 41.364821, 
        124.022786, 41.367047, 
        124.029505, 41.371099, 
        124.032806, 41.376167, 
        124.033039, 41.379306, 
        124.027574, 41.379466, 
        124.020629, 41.379634, 
        124.013204, 41.378855, 
        124.011988, 41.37665, 
        124.00681, 41.378869,
        124.000963, 41.382332, 
        123.992015,41.390939,
        123.989281, 41.380045, 
        123.988371, 41.375572, 
        123.983417, 41.374677, 
        123.977764, 41.375466, 
        123.970331, 41.379984, 
        123.95859, 41.395344,
        123.955154, 41.402897, 
        123.952174, 41.403244, 
        123.950578, 41.401085, 
        123.945047, 41.398471, 
        123.940228, 41.393856, 
        123.939437, 41.392488,
        123.935785, 41.388647,
        123.933433, 41.385875,
        123.932081, 41.383642,
        123.930276, 41.381509,
        123.928319, 41.380529,
        123.925065, 41.380226,
        123.920157, 41.380394,
        123.913045, 41.38047,
        123.907843,41.380442,
        123.902965, 41.38021,
      ],
      city:[
      123.672166, 41.268629,
      123.676053, 41.266435,
      123.684778, 41.267397,
      123.703604, 41.272703,
      123.72837, 41.285471, 
      123.743245, 41.295959,
      123.753347, 41.305453,
      123.760611, 41.311176,
      123.765488, 41.313893,
      123.771107, 41.315866,
      123.778461, 41.313283,
      123.786212, 41.309833,
      123.794979, 41.307447,
      123.800575, 41.308812,
      123.805932, 41.312274,
      123.808519, 41.317045,
      123.808479, 41.323186,
      123.808714, 41.32854, 
      123.812532, 41.332666,
      123.821845, 41.335987,
      123.836526, 41.337619,
      123.846018, 41.338201,
      123.85243, 41.337668, 
      123.861427, 41.33604, 
      123.869249, 41.338436,
      123.877925, 41.343306,
      123.885221, 41.351938,
      123.887097, 41.359849,
      123.889918, 41.367412,
      123.894314, 41.374856,
      123.89766, 41.378948, 
      123.902962,41.380178
      ],
      pond:[
        124.232769, 41.35083,
        124.216279, 41.346189, 
        124.204719, 41.344954, 
        124.187393, 41.339371, 
        124.178708, 41.338445, 
        124.175399, 41.34342, 
        124.17543, 41.340622, 
        124.17334, 41.340003, 
        124.172952, 41.337514, 
        124.173781, 41.336581, 
        124.175022, 41.333781, 
        124.170873, 41.332544, 
        124.166745, 41.330993, 
        124.162191, 41.325096, 
        124.160975, 41.32198, 
        124.159747, 41.319177, 
        124.156856, 41.318247,
        124.152723, 41.319499, 
        124.149012, 41.317635, 
        124.148207, 41.314509, 
        124.14942, 41.311731, 
        124.15355, 41.311412, 
        124.157264, 41.312963, 
        124.161806, 41.315134, 
        124.170018, 41.314838, 
        124.1783, 41.317926, 
        124.188978, 41.318556, 
        124.196039, 41.322266, 
        124.201818, 41.326614, 
        124.209655, 41.331894, 
        124.21296, 41.334689, 
        124.214607, 41.3322, 
        124.21585, 41.334686, 
        124.219964, 41.336238, 
        124.220404, 41.339967, 
        124.221646, 41.341831,
        124.224901, 41.339653, 
        124.229871, 41.342445, 
        124.239317, 41.345232, 
        124.244756, 41.350823, 
      ],
      // 200年标注线
      year_100:[
        123.764903,41.291024,
        123.765922,41.279471,
        123.921206,41.280422,
        123.918426,41.291024,
      ],
      // 100年标注线
      year_200:[
        123.665929,41.333461,
        123.666061,41.339871,
        123.766466,41.339984,
        123.766607,41.333704,
      ],
      // 轨迹回放路线
      flyRoad:[
        [123.835024,41.337645,118],
        [123.834184,41.337531,118],
        [123.832779,41.337304,118],
        [123.83103,41.336963,118],
        // [,,118],
        // [123.765358,41.314295,110],
      ],
      // 历史工程
      isHistoryProjectShow:false,
      // 右岸下游拦河闸处水面+左岸小堡公园段护岸改造1.142km
      yalhzWater:[
        123.80018,41.311551,
        123.800991,41.311819,
        123.801708,41.312059,
        123.802444,41.312375,
        123.803143,41.312839,
        123.803958,41.31362,
        123.804236,41.313986,
        123.804686,41.314796,
        123.805007,41.315505,
        123.805264,41.316137,
        123.805419,41.316923,
        123.805343,41.319353,
        123.80531,41.319853,
        123.805509,41.321255,
        123.808403,41.320968,
        123.808587,41.31791,
        123.808287,41.316112,
        123.807407,41.314477,
        123.806588,41.313262,
        123.805335,41.311449,
        123.804154,41.310582,
        123.803672,41.310157,
        123.802051,41.309855,
        123.801242,41.309538,
      ],
      // 丹阜水面
      danfuWater:[
        123.809651,41.330045,
        123.811958,41.332335,
        123.81234,41.332634,
        123.814668,41.33388,
        123.812726,41.335278,
        123.81076,41.333994,
        123.809076,41.333151,
        123.807323,41.332095,
        123.809651,41.330045,
      ],
      // 溪湖河口上游堤防加固
      xihuhekouWater:[
        123.758298,41.310196,
        123.758368,41.310404,
        123.758445,41.310498,
        123.758868,41.310835,
        123.759574,41.311266,
        123.760252,41.311741,
        123.760285,41.311807,
        123.761794,41.312701,
        123.762061,41.312829,
        123.76344,41.313418,
        123.765128,41.314216,
        123.767044,41.315181,
        123.768295,41.31573,
        123.768896,41.315959,
        123.769769,41.316256,
        123.77022,41.316333,
        123.770764,41.316347,
        123.77204,41.316045,
        123.774201,41.31533,
        123.775833,41.314783,

        123.777351,41.316464,
        123.776159,41.316965,
        123.774646,41.317899,
        123.773498,41.318532,
        123.772946,41.318787,
        123.770623,41.318891,
        123.769664,41.318407,
        123.767293,41.31694,
        123.763501,41.315386,
        123.76417,41.315664,
        123.759561,41.313531,
        123.756854,41.312349,
        123.755861,41.311251,
      ],
      // endregion
      //历史工程列表
      isOldLineShow:false,
    }
  },
  mounted() {
    const viewer = global.viewer
    // tooltip提示框
    this.$nextTick(() => {
        window.tooltip = new GlobeTooltip(global.viewer.container);
        window.tooltip.setVisible(false);
    });
  },
  methods: {
    // 调用父组件方法回到最初视角
    flyToHome(){
      global.viewer.camera.flyTo({
        destination:Cesium.Cartesian3.fromDegrees(123.75715,41.31040,5000)
      })
    },
    // 菜单键控制图层管理显示
    showLayerControler(){
      this.isShowRain=false
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.islayerControlerShow =!this.islayerControlerShow;
      this.isToushiShow =false;
      this.isShowContrast =false;
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 展示倾斜摄影
    showObliquePhotography(){
      if(!this.layerChcked.layer_1){
        this.$emit('hidden3DTiles')
        return
      } 
      this.$emit('show3DTiles')
    },
    // entity的展示与隐藏
    showEntity(){
      this.$emit('isTextShow')
     },
    // 定位视角到施工详情
    flyToEntity(){
      this.$emit('toEntity')
    },
    // 展示飞行漫游面板
    showVisual(){
      this.isMeasureToolsShow=false
      this.islayerControlerShow=false
      this.isVisualShow=!this.isVisualShow
      this.isShowRain=false
      this.isShowContrast=false;
      this.isToushiShow=false;
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 隐藏飞行漫游面板
    hideVisual(){
      const viewer = global.viewer
      this.isVisualShow=false
      // viewer.entities.removeAll()
      // global.linePlayback=[]
      this.clearFlyRoad()
    },
    // 画路线
    drawLineRoad(){
      this.$message('单击左键绘制范围，右键结束')
      this.closeHistory()
      const _this = this
      const viewer = global.viewer
      global.linePlayback=[]
      viewer.entities.removeAll()
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      var positions = []
      var polygon = null
      var cartesian = null
      var floatingPoint
      var measureFeature_polygon = []
      var maxHeight = []
      var getHei=[]
      global.linePlayback=[]
      handler.setInputAction(function (movement) {
        const ray = viewer.camera.getPickRay(movement.endPosition)
        cartesian = viewer.scene.globe.pick(ray, viewer.scene)
        // cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
        if (positions.length >= 2) {
          if (!Cesium.defined(polygon)) {
            // polygon = new PolygonPrimitive(positions)
          } else {
            positions.pop()
            positions.push(cartesian)
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      handler.setInputAction(function (movement) {
        const ray = viewer.camera.getPickRay(movement.position)
        cartesian = viewer.scene.globe.pick(ray, viewer.scene)
        // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
        if (positions.length == 0) {
          positions.push(cartesian.clone())
        }
        // positions.pop();
        positions.push(cartesian)
        // 在三维场景中添加点
        var cartographic = Cesium.Cartographic.fromCartesian(
          positions[positions.length - 1]
        )
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
        var heightString = cartographic.height
        // 路径回放坐标
        global.linePlayback.push([longitudeString,latitudeString,350])
        getHei.push(longitudeString,latitudeString,heightString)
        window.getHei=getHei
        floatingPoint = viewer.entities.add({
          name: '多边形面积',
          position: positions[positions.length - 1],
          point: {
            pixelSize: 5,
            color: Cesium.Color.WHITE,
            outlineColor: Cesium.Color.DEEPSKYBLUE,
            outlineWidth: 3,
            clampToGround:true,
            zIndex:9999,
            disableDepthTestDistance:50000
          }
        })
        window.floatingPoint=floatingPoint
        measureFeature_polygon.push()
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      //鼠标右键--结束绘制
      handler.setInputAction((event) => {
        const that = _this
        // 取消鼠标移动监听
        handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        // 清除所有事件
        if (handler) {
          handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
          handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
          handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
        let fly =viewer.entities.getById('flyLine')
        if(fly){
          viewer.entities.remove(fly)
        }
        if (positions.length >= 2) {
          let polyline_point_entity = viewer.entities.add({
            id:'flyLine',
            polyline: {
              // Cesium.Cartesian3.fromDegreesArray([经度1, 纬度1, 经度2, 纬度2,])
              // Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2])
              // 如果有高度，上面的 polyline_point_arr 里面要增加高度的
              positions: new Cesium.Cartesian3.fromDegreesArrayHeights(getHei),
              // 宽度
              width: 2,
              // 线的颜色
              material: Cesium.Color.YELLOW,
              // 是否显示
              show: true,
              // 是否贴地
              clampToGround:true
            }
        })
        window.polyline_point_entity=polyline_point_entity
      }
        if(global.linePlayback.length >= 2){
          const res = confirm('是否保存路线?')
          if(res){
            const pName = prompt('请输入线路名','线路名')
            if(pName){
              const m = JSON.parse(localStorage.getItem('memory'))
              const data = {
                user_id : m.userInfo.id,
                position_data :positions.slice(1),
                position_name:pName,
              }
              addPosition(data).then(res=>{
                if(res.data.code === 200){
                  _this.sendMessage('保存成功!','success')
                } else if (res.data.code === 501||res.data.code === 502||res.data.code === 402){
                  localStorage.removeItem('memory')
                  _this.$store.state.token = ''
                  _this.$store.state.userInfo = {}
                  _this.sendMessage('身份已过期，请重新登录','warning')
                } else {
                  _this.sendMessage('创建失败','warning')
                }
              })
            }
          }
        } else {
          _this.$notify({
            title: '不能少于两个点,请清除重新绘制',
            position: 'top-right',
            type: 'error',
            offset: 200
          })
          return
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    // 清除画好的路线
    clearFlyRoad(){
      const viewer = global.viewer
      let position = viewer.entities.getById('move')
      viewer.entities.removeAll()
      global.flyLinsener && global.flyLinsener()
      // global.flyLinsener && global.flyLinsener = null
      viewer.entities.remove(position)
      global.linePlayback=[]
    },
    // 开始飞
    start(){
      // 模型
      var modelOpt
      this.isVisualShow = false
      // this.isStartFly=true
      const viewer = global.viewer
      var lujingdata=global.linePlayback
      var property = new Cesium.SampledPositionProperty()
      var starttime = new Date()
      let arr = []
      var stoptime
      var timestamp = starttime.getTime()
      console.log(lujingdata)
      lujingdata.forEach((pos, index) => {
        var time = new Date(timestamp + index * (this.flySpeed-0))
        stoptime = time
        arr.push(Date.parse(stoptime))
        var position = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2])
        property.addSample(Cesium.JulianDate.fromDate(time), position)
      })
      global.stopTime=arr[arr.length-1]
      property.setInterpolationOptions({
        interpolationDegree: 0.0001,
        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
      })
      // 判断模型选择
      if(this.chooseModel === '1'){
        modelOpt = {
          uri: "http://120.46.72.236:2365/shuili/wurenji.glb",
          minimumPixelSize: 64
        }
      } else if (this.chooseModel === '2'){
        modelOpt = {
          uri: "http://120.46.72.236:2365/shuili/scene.glb",
          minimumPixelSize: 64
        }
      } else {
        modelOpt = {
        }
      }
      // 模型实体
      var entitydd = viewer.entities.add({
        // id:'move',
        availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
          start: Cesium.JulianDate.fromDate(starttime),
          stop: Cesium.JulianDate.fromDate(new Date(stoptime))
        })]),
        position: property, // 点集
        orientation: new Cesium.VelocityOrientationProperty(property), // 朝向
        model: modelOpt
      })
      viewer.clock.currentTime = Cesium.JulianDate.fromDate(starttime) //修改时间轴的当前时间
      viewer.clock.stopTime = Cesium.JulianDate.fromDate(new Date(stoptime))
      viewer.clock.shouldAnimate = true //开始播放
      global.stop=viewer.clock.stopTime
      global.nowTime=Cesium.JulianDate.fromDate(new Date())
      // 判断视角选择
      if(this.visualAngle==="1"){
        viewer.trackedEntity = entitydd
      } else if (this.visualAngle==="2"){
        console.log(entitydd.position._value);
        const end = global.linePlayback[global.linePlayback.length -1]
        const endPosition = Cesium.Cartesian3.fromDegrees(end[0],end[1],end[2])
        global.flyLinsener = viewer.clock.onTick.addEventListener(function(e){
          if(viewer.clock.shouldAnimate&&viewer.clock.shouldAnimate==true){
            const orientation = entitydd.orientation
            const position = entitydd.position
            let ori = orientation.getValue(viewer.clock.currentTime) 
            // 获取位置
            let center = position.getValue(viewer.clock.currentTime)
            if(!center){
              global.flyLinsener()
              return
            }
            // 1、由四元数计算三维旋转矩阵
            var mtx3 = Cesium.Matrix3.fromQuaternion(ori)
            // 2、计算四维转换矩阵：
            var mtx4 = Cesium.Matrix4.fromRotationTranslation(mtx3, center)
            // 3、计算角度：
            var hpr = Cesium.Transforms.fixedFrameToHeadingPitchRoll(mtx4)
            // 获取角度（弧度）
            const headingTemp = hpr.heading
            const pitchTemp = hpr.pitch
            
            // 调整角度为第一人称，注意调整的角度
            const heading = Cesium.Math.toRadians(Cesium.Math.toDegrees(headingTemp) + 90)
            const pitch = Cesium.Math.toRadians(Cesium.Math.toDegrees(pitchTemp) - 12)
            // 视角高度，根据模型大小调整
            const range = 140.0
            // 动态改变模型视角
            viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))
          } else {
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
            global.flyLinsener()
          }
          // console.log(viewer.clock.shouldAnimate);
        })
      }
    },
    // 中断飞行
    breakFly(){
      global.viewer.entities.removeAll()
      this.isStartFly=false
    },
    //region
    flyToBasic(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tilesf1)
    },
    // 右岸衍水大桥至溪湖桥段堤防加固1.918km(done)  TODO
    showYanShui(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_1) {
          viewer.scene.primitives.remove(viewer.tilesf1)
          return
      }
      this.showfirst()
    },
    showfirst(){
      const viewer = global.viewer
      const tilesf1 = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/HuuEyOfI/tileset.json',
      })
      viewer.tilesf1 = tilesf1
      viewer.scene.primitives.add(tilesf1)
    },
    flyToCaiHeTunKou(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tileset1)
    },
    // 右岸溪湖河口上游段护岸改造0.6km (done)  修改中：切片失败
    showXiHuHeKou(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_4) {
          viewer.scene.primitives.remove(viewer.tileset2)
          viewer.entities.remove(global.water4)
          return
      }
      const tileset2 = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/wBkxOkG2/tileset.json',
      });
      viewer.tileset2 = tileset2
      viewer.scene.primitives.add(tileset2);
      global.water4 = viewer.entities.add({
        id:'water4',
        polyline: {
          positions:Cesium.Cartesian3.fromDegreesArray(this.xihuhekouWater),
          width: 0,
          material: new Cesium.Color.fromBytes(0,191,255,100),
          clampToGround: true,
          },
        polygon: {
          show: true,
          hierarchy: Cesium.Cartesian3.fromDegreesArray(this.xihuhekouWater),
          material: new Cesium.Color.fromBytes(0,191,255,100),
        },
      })
    },
    flyToXiHuHeKou(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tileset2)
    },
    // 左岸本钢厂区段护岸改造2.914km   TODO
    showBenGang(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_3) {
          viewer.scene.primitives.remove(viewer.bg)
          return
      }
      this.initBenGang()
    },
    initBenGang(){
      const viewer = global.viewer
      const bg = new Cesium.Cesium3DTileset({
          url: 'http://124.70.36.154:9003/model/vNxoMXLb/tileset.json',
      })
      viewer.bg = bg
      viewer.scene.primitives.add(bg);
      console.log(wn2);
    },
    flyToBenGang(){
      const viewer = global.viewer
      viewer.flyTo(viewer.bg)
    },
    // 左岸爱之滩公园段护岸改造1.502km  已修改
    showAiZhiTan(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_5) {
          viewer.scene.primitives.remove(viewer.tilesea)
          return
      }
      this.initaizhitan()
    },
    initaizhitan(){
      const viewer = global.viewer
      const tilesea = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/8vCaKXRb/tileset.json',
      })
      viewer.tilesea = tilesea
      viewer.scene.primitives.add(tilesea);
    },
    flyToAiZhiTan(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tilesea)
    },
    // 左岸小堡公园段护岸改造1.142km  修改中：第四个切片失败
    showXiaoPuGongYuan(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_6) {
        viewer.scene.primitives.remove(viewer.tilesz)
        viewer.entities.remove(global.water1)
        return
      }
      const tilesz = new Cesium.Cesium3DTileset({
          url: 'http://120.70.39.154:9003/model/v3nGAHUY/tileset.json',
      });
      viewer.tilesz = tilesz
      viewer.scene.primitives.add(tilesz);
      // 水
      // global.water1 = this.addPolygon('water1',this.yalhzWater)
      global.water1 = viewer.entities.add({
        id:'water1',
        polyline: {
          positions:Cesium.Cartesian3.fromDegreesArray(this.yalhzWater),
          width: 0,
          material: new Cesium.Color.fromBytes(0,191,255,100),
          clampToGround: true,
          },
        polygon: {
          show: true,
          hierarchy: Cesium.Cartesian3.fromDegreesArray(this.yalhzWater),
          material: new Cesium.Color.fromBytes(0,191,255,100),
        },
      })
    },
    flyToXiaoPuGongYuan(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tilesz)
    },
    // 丹阜高速至威宁大桥段护岸改造0.605km  已修改
    showDanFu(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_10) {
          viewer.scene.primitives.remove(viewer.tilesD)
          viewer.entities.remove(global.water2)
          return
      }
      const tilesD = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/y8GWhH7y/tileset.json',
      });
      viewer.tilesD = tilesD
      viewer.scene.primitives.add(tilesD);
      global.water2 = viewer.entities.add({
          id:'water2',
          polyline: {
              positions:Cesium.Cartesian3.fromDegreesArray(this.danfuWater),
              width: 0,
              material: new Cesium.Color.fromBytes(0,191,255,100),
              clampToGround: true,
            },
          polygon: {
              show: true,
              hierarchy: Cesium.Cartesian3.fromDegreesArray(this.danfuWater),
              material: new Cesium.Color.fromBytes(0,191,255,100),
          },
      })
    },
    flyToDanFu(){
      const viewer = global.viewer
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(123.811599, 41.332061, 1170.53)
      })
    },
    // 新建威宁拦河闸至卧龙大桥段防汛路1.534km(done)  已修改
    showWeiNing(){
      const viewer = global.viewer
      if(!this.layerChcked.layer_7){
        this.removeWeiNing()
        return 
      }
      this.initweining()
    },
    removeWeiNing(){
      const viewer = global.viewer
      viewer.scene.primitives.remove(viewer.wn1)
      viewer.scene.primitives.remove(viewer.wn2)
    },
    initweining(){
      const viewer = global.viewer
      const wn2 = new Cesium.Cesium3DTileset({
        url: 'http://124.70.39.154:9003/model/BjJDMI0d/tileset.json',
      })
      viewer.scene.primitives.add(wn2)
      viewer.wn2 = wn2
    },
    flyToWeiNing(){
      const viewer = global.viewer
      viewer.flyTo(viewer.wn2)
    },
    // 右岸小堡拦河闸下游段护岸改造1.265km  已修改
    showYouAnXiaoPu(){
      const viewer = global.viewer
      if(!this.layerChcked.layer_8){
        viewer.scene.primitives.remove(viewer.tilesr)
        return 
      }
      const tilesr = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/Dt8Qaqzu/tileset.json',
      });
      viewer.tilesr = tilesr
      viewer._cesiumWidget._creditContainer.style.display = "none";
      viewer.scene.primitives.add(tilesr);
    },
    flyToYouAnXiaoPu(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tilesr)
    },
    // 合金沟两岸新建回水堤共计135m 已修改
    showHeJinGou(){
      const viewer = global.viewer
      // viewer.tileset7 = this.add('http://120.46.72.236:9003/model/lE0852sI/tileset.json',this.layerChcked.layer_11)
      if(!this.layerChcked.layer_11){
        viewer.scene.primitives.remove(viewer.tileset7)
        return 
      }
      const tileset7 = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/lJJtHX2E/tileset.json',
      })
      viewer.tileset7 = tileset7
      viewer.scene.primitives.add(viewer.tileset7);

    },
    flyToHeJinGou(){
      const viewer = global.viewer
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(123.795078, 41.306515, 500.53)
      })
    },
    // 左岸欲溪桥下游段新建护脚0.117km  已修改 错乱像排水口
    showYuXiQiao(){
      const viewer = global.viewer
      if(!this.layerChcked.layer_12){
        viewer.scene.primitives.remove(viewer.tilesy)
        return 
      }
      const tilesy = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/j817zaLM/tileset.json',
      });
      viewer.tilesy = tilesy
      viewer._cesiumWidget._creditContainer.style.display = "none";
      viewer.scene.primitives.add(tilesy);
    },
    flyToYuXiQiao(){
      const viewer = global.viewer
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(123.802731, 41.309914, 500.53)
      })
    },
    // 新建防洪墙238m  已修改
    showLast(){
      const viewer = global.viewer
      const tiles7d = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/Q6byDJLO/tileset.json',
      })
      viewer.tiles7d = tiles7d
      viewer.scene.primitives.add(tiles7d);
    },
    showBinHeNanLu(){
      const viewer = global.viewer
      if (!this.layerChcked.layer_13) {
          viewer.scene.primitives.remove(viewer.tiles7d)
          return
      }
      this.showLast()
    },
    flyToBinHeNanLu(){
      const viewer = global.viewer
      viewer.flyTo(viewer.tiles7d)
    },
    // 大峪沟  已修改
    showdayugou(){
      const viewer = global.viewer
      if(!this.layerChcked.layer_15){
        this.removedayugou()
        return 
      }
      this.initdayugou()
    },
    removedayugou(){
      const viewer = global.viewer
      viewer.scene.primitives.remove(viewer.dyg)
    },
    initdayugou(){
      const viewer = global.viewer
      const dyg = new Cesium.Cesium3DTileset({
          url: 'http://124.70.39.154:9003/model/wLz7kai6/tileset.json',
      })
      viewer.dyg = dyg
      viewer.scene.primitives.add(dyg)
    },
    flyTodayugou(){
      const viewer = global.viewer
      viewer.flyTo(viewer.dyg)
    },
    //endregion
    // 展示工具箱
    showMeasureTools(){
      this.islayerControlerShow=false
      this.isVisualShow=false
      this.isMeasureToolsShow=!this.isMeasureToolsShow
      this.isShowContrast=false;
      this.isToushiShow=false;
      this.isShowRain=false;
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 隐藏工具箱
    hideMeasureTools(){
      this.isMeasureToolsShow=false
    },
    // 通视分析
    VisibilityAnalysis(){
      const that = this
      const viewer = global.viewer
      if(global.VA && global.VA.resultPolylines){
        global.VA.resultPolylines.forEach((e)=>{
            viewer.entities.remove(e)
        })
        global.VA_positions=[]
      }
      global.VA_handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      global.VA_handler.setInputAction(function (e) {
        var position = viewer.scene.pickPosition(e.position);
        global.VA_positions.push(position);
        if(global.VA_positions.length==1){
        }else if(global.VA_positions.length==2){
          that.va_analysis()
            that.$nextTick(() => {
                  window.tooltip.setVisible(false);
                });
        }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     // * 监测鼠标移动事件
      global.VA_handler.setInputAction(event => {
        let position = event.endPosition;
        if (global.VA_positions.length < 1) {
          that.$nextTick(() => {
              window.tooltip.showAt(position, "<p>选择起点</p>");
            });
            return;
        }
        let tip = "<p>点击添加下一个点</p>";
        this.$nextTick(() => {
          window.tooltip.showAt(position, tip);
        });
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    va_analysis(){
      const viewer = global.viewer
      global.VA_handler.destroy()
      global.VA = new VisibilityAnalysisClass(viewer,viewer.tileset)
      global.VA.setPositions(...global.VA_positions)
      global.VA.useOffsetHeight(0.5)
      global.VA.startAnalysis()
    },
    // 透视分析面板
    showTongshifenxi(){
      this.isToushiShow=!this.isToushiShow
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.islayerControlerShow=false
      this.isShowRain=false
      this.isShowContrast=false;
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 隐藏透视面板
    hideToushi(){
      const viewer = global.viewer
      this.isToushiShow=false
      // global.isToushiShow=false
      // global.pickPositions = []
      // global.boardLines = []
      // global.pickPoints = []
      // global.frustrumLabel = undefined
      // global.viewPointFlag = false
      viewer.entities.removeAll()
      // handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      // handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      // handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    clearToushi(){
      const viewer = global.viewer
      global.pickPositions = []
      global.boardLines = []
      global.pickPoints = []
      global.frustrumLabel = undefined
      global.viewPointFlag = false
      global.VA_handler.destroy()
      global.VA=null,
      global.VA_handler=null,
      global.VA_positions=[],
      viewer.entities.removeAll()
    },
    // 展示天气特效面板
    showRain(){
      this.isShowRain=!this.isShowRain
      this.islayerControlerShow=false
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.isToushiShow=false
      this.isShowContrast=false;
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 隐藏天气特效面板
    closeWeather(){
      this.isShowRain=false
      if (global.snow) {
        global.snow.destroy();
      }
      if (global.rain) {
        global.rain.destroy();
      }
      if (global.fog) {
        global.fog.destroy();
      }

    },
    // 清除天气效果
    destoryWeather() {
      // 清除雨雪效果
      const viewer = global.viewer;
      if (global.snow) {
        global.snow.destroy();
      }
      if (global.rain) {
        global.rain.destroy();
      }
      if (global.fog) {
        global.fog.destroy();
      }
      // 清除模拟光照
			viewer.scene.globe.enableLighting = false
			viewer.shadows = false
      clearInterval(global.inter)
      global.inter = null
      // 清除自转模拟昼夜
      if(window.layerNight){
        viewer.imageryLayers.remove(window.layerNight)
        viewer.clock.shouldAnimate = false;//时间轴动画
        viewer.clock.onTick.removeEventListener(onTickCallback);
        global.viewer.flyTo(global.viewer.tileset)
      }
    },
    // 下雪
    showSnow(){
      const viewer = global.viewer
      let that = this;
      that.destoryWeather();
      global.snow = new Cesium.SnowEffect(viewer, {
        snowSize: 0.02, //雪大小 ，默认可不写
        snowSpeed: 60.0 //雪速，默认可不写
      })
    },
    // 下雨
    showRains(){
      const viewer = global.viewer
      let that = this;
        that.destoryWeather();
        global.rain = new Cesium.RainEffect(viewer, {
          tiltAngle: -.6, //倾斜角度
          rainSize: 0.6, //雨大小
          rainSpeed: 120.0 //雨速
        });
    },
    // 下雾
    showFog(){
      const viewer = global.viewer
      let that = this;
        that.destoryWeather();
        global.fog = new Cesium.FogEffect(viewer, {
          visibility: 0.2,
          color: new Cesium.Color(0.8, 0.8, 0.8, 0.3)
        });
    },
    // 火焰
    showFire(e){
      const viewer = global.viewer
      const _this = this;
      let position = []
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      handler.setInputAction(function(e) {
          let ray = viewer.camera.getPickRay(e.position);
          let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
          let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
          let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
          let alt = cartographic.height; // 高度
          let coordinate = { lon: lng, lat: lat, alt: alt };
          position.push(cartographic.x,cartographic.y,cartographic.z)
          let obj = {
            position:position,
            image:firepic,
            viewer:global.viewer
          }
          _this.createParticleFire(obj)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // this.getPosition(viewer,handler)
    },
    // 卷帘对比面板显示
    showContrast(){
      this.isShowContrast=true
      this.islayerControlerShow=false;
      this.isMeasureToolsShow=false;
      this.isVisualShow=false;
      this.isToushiShow=false;
      this.isShowRain=false;
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 关闭卷帘对比
    closeContrast(){
      const viewer = global.viewer
      this.isShowContrast=false;
      let slider = document.getElementById('slider');
      slider.style.display = 'none';
      let layers = viewer.imageryLayers;
      layers.remove(this.leftLayer);
      layers.remove(this.rightLayer);
      this.option1=''
      this.option2=''
    },
    // 初始化卷帘图层
    initContrast(){
      const viewer = global.viewer
      var layers = viewer.imageryLayers._layers;
      // 将滑块的位置与分割位置同步
      const slider = document.getElementById("slider");
      slider.style.display = 'block';
      //确定分割点位置
      viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;
      //占据父级容器的比例
      const handler = new Cesium.ScreenSpaceEventHandler(slider);
      //处理用户输入事件。可以添加自定义功能以在用户输入时执行；参数为任意元素
      let moveActive = false;
      
      function move(movement) {
        if (!moveActive) {
          return;
        }
      //捕获滑动停止的位置
        const relativeOffset = movement.endPosition.x;
        const splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
        slider.style.left = `${100.0 * splitPosition}%`;
        viewer.scene.splitPosition = splitPosition;
      }
      
      //对分割条的操作
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.PINCH_START);
      
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
      
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.PINCH_END);

    },
    // 切换左图层
    changeLayerLeft(n){
      const that= this
      const viewer = global.viewer
      const layers = viewer.imageryLayers;
      layers.swipeEnabled = true;
      global.layers = viewer.imageryLayers
      if(that.leftLayer){
        layers.remove(that.leftLayer)
      }
      if(n==='moren'){
        that.leftLayer = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
          url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          minimumLevel: 1,
          maximumLevel: 18,
        crs: 'WGS84',
        }))
        that.leftLayer.splitDirection = Cesium.SplitDirection.LEFT;
      } else if (n==='gaodeshiliang'){
        that.leftLayer = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({       
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          minimumLevel: 1,
          maximumLevel: 18,
          crs: 'WGS84',
        }))
        that.leftLayer.splitDirection = Cesium.SplitDirection.LEFT;
      } else if (n==='gaodejiedao'){
        // layers.remove(that.leftLayer)
        that.leftLayer = layers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({       
          url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=50f7f4eb7a9fd945b539da34e13ec6b7",
          subdomains:['0','1','2','3','4','5','6','7'],
          layer: "tdtImgLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
      }))
        that.leftLayer.splitDirection = Cesium.SplitDirection.LEFT;
      } else {
        // layers.remove(that.leftLayer)
        that.leftLayer = layers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=4b418047223bdd0dfc7cbdb7dfe1d3e6",
          layer: "img", //与上面url img_w对应
          style: "default",
          tileMatrixSetID: "w",//与上面url img_w对应
          format: "tiles",
          maximumLevel: 18,
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
      }))
        that.leftLayer.splitDirection = Cesium.SplitDirection.LEFT;
      }
    },
    // 切换右图层
    changeLayerRight(n){
      const that= this
      const viewer = global.viewer
      const layers = viewer.imageryLayers;
      layers.swipeEnabled = true;
      global.layers = viewer.imageryLayers
      if(that.rightLayer){
        layers.remove(that.rightLayer)
      }
      if(n==='moren'){
        that.rightLayer = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
          url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          minimumLevel: 1,
          maximumLevel: 18,
        crs: 'WGS84',
        }))
        that.rightLayer.splitDirection = Cesium.SplitDirection.RIGHT;
      } 
       if (n==='gaodeshiliang'){
        that.rightLayer = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({       
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          minimumLevel: 1,
          maximumLevel: 18,
          crs: 'WGS84',
        }))
        that.rightLayer.splitDirection = Cesium.SplitDirection.RIGHT;
      } 
       if (n==='gaodejiedao'){
        // layers.remove(that.rightLayer)
        that.rightLayer = layers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({       
          url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=50f7f4eb7a9fd945b539da34e13ec6b7",
          subdomains:['0','1','2','3','4','5','6','7'],
          layer: "tdtImgLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
      }))
        that.rightLayer.splitDirection = Cesium.SplitDirection.RIGHT;
      } 
      if (n==='baidu'){
        // layers.remove(that.rightLayer)
        that.rightLayer = layers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=4b418047223bdd0dfc7cbdb7dfe1d3e6",
          layer: "img", //与上面url img_w对应
          style: "default",
          tileMatrixSetID: "w",//与上面url img_w对应
          format: "tiles",
          maximumLevel: 18,
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
      }))
        that.rightLayer.splitDirection = Cesium.SplitDirection.RIGHT;
      }
    },
    // 光照模拟
    showLight(){
      const viewer = global.viewer;
      viewer.scene.globe.enableLighting = true
			viewer.shadows = true
			viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
			viewer.shadowMap.softShadows  = true
			viewer.shadowMap.darkness = 0.1 //阴影透明度--越大越透明
      let time = 0
      if(global.inter){
        global.inter = null
        clearInterval(global.inter)
      }
			global.inter = setInterval(() => {
				// 改变时间设置光照效果
				let date = new Date().getTime()+ time
				let utc = Cesium.JulianDate.fromDate(new Date(date))
				// //北京时间=UTC+8=GMT+8 不用加8
				// viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
        //北京时间
				viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
				time = time + 1000 * 100
			}, 100)

			// viewer.scene.light = new Cesium.DirectionalLight({
			// 	//去除时间原因影响模型颜色
			// 	direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772)
			// })
    },
    // 模拟昼夜交替
    showNight(){
      const viewer = global.viewer;
      viewer.scene.globe.enableLighting = true//必须开启光照效果，
      // const layers = global.viewer.scene.imageryLayers
      const layerNight = viewer.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
      );      
      layerNight.dayAlpha = 0.0 //白天图层透明值
      layerNight.nightAlpha = 1.0 //夜晚图层透明值
      layerNight.brightness = 5.5 //图层发光亮度
      window.layerNight = layerNight;

      viewer.scene.globe.enableLighting = true;//打开光照
      viewer.clock.shouldAnimate = true;//时间轴动画
      viewer.clock.multiplier = 200;//时间轴速度
      var previousTime = viewer.clock.currentTime.secondsOfDay;
        //地租自转事件
      function onTickCallback() {
        var spinRate = 1;
        var currentTime = viewer.clock.currentTime.secondsOfDay;
        var delta = (currentTime - previousTime) / 1000;
        previousTime = currentTime;
        viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
      }
      window.onTickCallback = onTickCallback
      viewer.clock.onTick.addEventListener(onTickCallback);
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
        orientation: {
          heading: Cesium.Math.toRadians(348.4202942851978),
          pitch: Cesium.Math.toRadians(-89.74026687972041),
          roll: Cesium.Math.toRadians(0),
        },
      });
    },
    // 天际线
    openSkylineAnay(){
      // mixins
      global.silhouette = this.showSkylineAnay(global.skylineAnayStages,global.silhouette,global.viewer)
    },
    // 展示gis工具箱
    showGisTools(){
      this.isgisToolsShow=!this.isgisToolsShow
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.islayerControlerShow=false
      this.isShowRain=false
      this.isShowContrast=false;
      this.isComputedLineShow=false
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 隐藏gis分析面板
    hideGisTools(){
      this.isgisToolsShow=false
      this.clearGisAll()
    },
    // 关闭gis面板清除所有
    clearGisAll(){
      // 关闭天际线
      if(global.silhouette){
        global.silhouette.enabled=false;
      }
      // 关闭坡向分析
      if(global.viewer.scene.globe.depthTestAgainstTerrain){
        global.startAndEndPoints = [],
        global.interNumber = 5000,
        global.points = []
        global.viewer.poxiangHandler = null
        global.viewer.scene.globe.depthTestAgainstTerrain = false
        global.viewer.entities.removeAll()
        document.getElementById("echarts").style.visibility = "hidden";
        this.isEchartsShow = false
      }
    },
    // 展示等高线分析面板
    showContourLine(){
      this.isgisToolsShow=false
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.islayerControlerShow=false
      this.isShowRain=false
      this.isShowContrast=false;
      this.isComputedLineShow=!this.isComputedLineShow
      this.isAnalyseShow=false
      this.isHistoryProjectShow=false
    },
    // 隐藏等高线
    hideComputedLine(){
      this.isComputedLineShow=false
      this.removeContourLine()
    },
    // 等高线分析
    contourLine(){
      const viewer = global.viewer
      const _this = this
      if(global.elevationConterMaterial){
        global.elevationConterMaterial=null
        viewer.scene.globe.material=null
      }
      global.elevationConterMaterial = new Cesium.Material({
        fabric: {
          type: 'ElevationContour',
          uniforms: {
            //等高线的颜色
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
            //等高线的间隔
            spacing:_this.separationDistance-0,
            width:2,
          }
        }
      });
      viewer.scene.globe.material = global.elevationConterMaterial;
    },
    // 移除分析
    removeContourLine(){
      const viewer = global.viewer
      viewer.scene.globe.material=null

    },
    // 展示坡向分析
    doSlope(){
      this.isgisToolsShow=false
      this.$message('请选择起点和终点')
      this.initViewer()

    },
    // 关闭坡向分析
    clearEcharts(){
      global.startAndEndPoints = [],
      global.interNumber = 5000,
      global.points = []
      global.viewer.poxiangHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除事件
      global.viewer.poxiangHandler = null
      global.viewer.scene.globe.depthTestAgainstTerrain = false
      global.viewer.entities.removeAll()
      document.getElementById("echarts").style.visibility = "hidden";
      this.isEchartsShow = false
    },
    // 缓冲分析
    doAnalyse(index){
      this.isAnalyseShow=true
      this.islayerControlerShow=false
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.isToushiShow=false
      this.isShowContrast=false
      this.isComputedLineShow=false
      this.isEchartsShow=false
      this.isgisToolsShow=false
      let analyseArr = []
      if(index===1){
        // 初始化宽度
        this.analyseScope=50
        global.bufferType=index
        this.initPointBuffer()
      } else if (index===2){
        // 初始化宽度
        this.analyseScope=50
        global.bufferType=index
        this.initPolylineBuffer()
      } else {
        // 初始化宽度
        this.analyseScope=50
        global.bufferType=index
        this.initPolygonBuffer()
      }
    },
    // 关闭缓冲分析
    closeBufferAnalyse(){
      const viewer = global.viewer
      this.isAnalyseShow = false
      global.bufferArr=[]
      if(global.bufferType===1){
        viewer.pointHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除事件
        console.log(viewer.pointHandler,'++');
      } else if (global.bufferType===2) {
        viewer.lineHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
        viewer.lineHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
      } else {
        viewer.surfaceHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
        viewer.surfaceHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
      }
      global.bufferType = null
      global.bufferArr=[]
      viewer.entities.removeAll()
    },
    // 初始化点缓冲
    initPointBuffer() {
      const that = this
      const viewer = global.viewer
      this.$message('点击创建缓冲点')
      var pointHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // viewer.scene.globe.depthTestAgainstTerrain = true
      pointHandler.setInputAction(function(e) {
        let ray = viewer.camera.getPickRay(e.position);
        let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
        let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
        let alt = cartographic.height; // 高度
        global.bufferArr.push(lng)
        global.bufferArr.push(lat)
        global.bufferArr.push(alt)
        that.addPoint(global.bufferArr);
        let pointF = turf.point(global.bufferArr);
        let buffered = turf.buffer(pointF, that.analyseScope, { units: 'meters' });
        let coordinates = buffered.geometry.coordinates;
        let points = coordinates[0];
        let degreesArray = that.pointsToDegreesArray(points);
        that.addBufferPolyogn(Cesium.Cartesian3.fromDegreesArray(degreesArray));
        global.bufferArr = []
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      viewer.pointHandler=pointHandler
    },
    //格式转换
    pointsToDegreesArray(points) {
      let degreesArray = [];
      points.map(item => {
          degreesArray.push(item[0]);
          degreesArray.push(item[1]);
      });
      return degreesArray;
    },
    //添加缓冲面
    addBufferPolyogn(positions) {
      const viewer = global.viewer
      viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(positions),
          material: Cesium.Color.RED.withAlpha(0.6),
          classificationType: Cesium.ClassificationType.BOTH
        },
      });
    },
    //添加点
    addPoint(point) {
      const viewer = global.viewer
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2]),
          point: {
            pixelSize: 10,
            color: Cesium.Color.YELLOW,
            outlineWidth: 3,
            outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
            clampToGroundL:true,
            disableDepthTestDistance:2000
          }
      });
    },
    //初始化线缓冲
    initPolylineBuffer() {
      const that = this
      that.$message('点击绘制线段，右键结束')
      const viewer = global.viewer
      var lineHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      lineHandler.setInputAction(function(e) {
        let ray = viewer.camera.getPickRay(e.position);
        let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
        let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
        let alt = cartographic.height; // 高度
        global.bufferArr.push([lng, lat, alt])

        // 添加点
        viewer.entities.add({
          position:Cesium.Cartesian3.fromDegrees(lng, lat, alt),
          point: {
            pixelSize: 10,
            color: Cesium.Color.fromCssColorString("#60cdad"),
            outlineWidth: 3,
            outlineColor: Cesium.Color.WHITE,
            clampToGroundL:true,
            disableDepthTestDistance:2000
          },
        })
        // 初始化线
        let degreesArray = that.pointsToDegreesArray(global.bufferArr)
        that.addPolyline(Cesium.Cartesian3.fromDegreesArray(degreesArray))
        viewer.degreesArray=degreesArray
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // 右键开始分析
      lineHandler.setInputAction(function(e) {
        // 判断点个数
        if(global.bufferArr.length<2){
          that.$message('至少选择两个点')
          that.lineRecursion()
          global.bufferArr=[]
          viewer.entities.removeAll()
          lineHandler.destroy()
          return
        }
        // 创建polygon面
        let polylineF = turf.lineString(global.bufferArr);
        let buffered = turf.buffer(polylineF, that.analyseScope, { units: 'meters' });
        let coordinates = buffered.geometry.coordinates;
        global.bufferArr = coordinates[0];
        console.log(global.bufferArr,'global.bufferArr');
        viewer.degreesArray = that.pointsToDegreesArray(global.bufferArr);
        console.log(viewer.degreesArray,'viewer.degreesArray');

        // 清空数组
        global.bufferArr=[]
        // 创建缓冲线
        that.addBufferPolyogn(Cesium.Cartesian3.fromDegreesArray(viewer.degreesArray));
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
      viewer.lineHandler=lineHandler
    },
    //添加线
    addPolyline(positions) {
      console.log(positions);
      const viewer = global.viewer
      viewer.entities.add({
        polyline: {
          positions: positions,
          width: 5,
          material: Cesium.Color.YELLOW,
          clampToGround:true,
        },
        point:{
        }
      })
    },
    //初始化面缓冲
    initPolygonBuffer() {
      const that = this
      that.$message('点击绘制面，右键结束')
      const viewer = global.viewer
      var surfaceHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      surfaceHandler.setInputAction(function(e) {
        let ray = viewer.camera.getPickRay(e.position);
        let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
        let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
        let alt = cartographic.height; // 高度
        global.bufferArr.push([lng, lat, alt])

        // 添加点
        viewer.entities.add({
          position:Cesium.Cartesian3.fromDegrees(lng, lat, alt),
          point: {
            pixelSize: 10,
            color: Cesium.Color.fromCssColorString("#60cdad"),
            outlineWidth: 3,
            outlineColor: Cesium.Color.WHITE,
            clampToGroundL:true,
            disableDepthTestDistance:2000
          },
        })

        // 初始化线
        // let degreesArray = that.pointsToDegreesArray(global.bufferArr)
        // that.addPolyline(Cesium.Cartesian3.fromDegreesArray(degreesArray))
        // viewer.degreesArray=degreesArray
      },Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // 右键开始分析
      surfaceHandler.setInputAction(function(e){
        // 判断点个数
        if(global.bufferArr.length<3){
          that.$message('至少选择三个点')
          global.bufferArr=[]
          viewer.entities.removeAll()
          surfaceHandler.destroy()
          that.surfaceRecursion()
          return
        }

        // // 销毁handler
        // surfaceHandler.destroy()
        // push第一个点进去，首位为同一个点
        let arr = global.bufferArr[0]
        global.bufferArr.push(arr)

        let degreesArray = that.pointsToDegreesArray(global.bufferArr);
        that.addPolygon(Cesium.Cartesian3.fromDegreesArray(degreesArray));

        let polygonF = turf.polygon([global.bufferArr]);
        let buffered = turf.buffer(polygonF, that.analyseScope, { units: 'meters' });
        let coordinates = buffered.geometry.coordinates;
        global.bufferArr = coordinates[0];
        degreesArray = that.pointsToDegreesArray(global.bufferArr);
        that.addBufferPolyogn(Cesium.Cartesian3.fromDegreesArray(degreesArray));
        global.bufferArr=[]
      },Cesium.ScreenSpaceEventType.RIGHT_CLICK)
      viewer.surfaceHandler=surfaceHandler
    },
    //添加面
    addPolygon(positions) {
      const viewer = global.viewer
      viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(positions),
          material: Cesium.Color.YELLOW.withAlpha(0.6),
          classificationType: Cesium.ClassificationType.BOTH
        },
        polyline: {
          positions: positions,
          width: 5,
          material: Cesium.Color.YELLOW.withAlpha(0.4),
          clampToGround:true,
        }
      });
    },
    // 更改缓冲宽度
    changeAnalyseScope(){
      // 判断种类
      if(global.bufferType===1){
        // 点
        this.initPointBuffer()
      } else if (global.bufferType===2){
        // 线
        this.initPolylineBuffer
      } else {
        // 面
        this.initPolygonBuffer()
      }
    },
    // 递归点
    pointRecursion(){
      this.initPointBuffer()
    },
    // 递归线
    lineRecursion(){
      this.initPolylineBuffer()
    },
    // 递归面
    surfaceRecursion(){
      this.initPolygonBuffer()
    },
    // 展示挖方
    showExcavate(){
      this.isWaShow=!this.isWaShow
      this.islayerControlerShow=false
      this.isVisualShow=false
      this.isMeasureToolsShow=false
      this.isToushiShow=false
      this.isShowRain=false
      this.isShowContrast=false
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isEchartsShow=false
      this.isAnalyseShow=false
      // this.getLocation()
    },
    // 隐藏挖方
    closeWaFang(){},
    // 出图
    dataURLtoBlob(dataurl){
      // dataurl   图片base64编码
      // filename  图片名
      let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    takePic(){
      const viewer = global.viewer
      viewer.render() //不加会出现导出是一张黑乎乎的图片
			let canvas = viewer.scene.canvas
			let image = canvas
				.toDataURL('image/png')
				.replace('image/png', 'image/octet-stream')
			let link = document.createElement('a')
			let blob = this.dataURLtoBlob(image)
			let objurl = URL.createObjectURL(blob)
			link.download = "三维模型场景_"+ (Math.random()*1000).toFixed(0) +".png"
			link.href = objurl
			link.click()
    },
    // 显示视频弹框
    showVideo_1(){
      if(!this.layerChcked.video_1){
        this.closeVideo()
        return 
      }
      this.initvideo()
    },
    initvideo(){
      global.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(123.84125,41.338098, 5000)
      })
      let videoEntity = global.viewer.entities.add({
        id: 'videoModel',
        position: Cesium.Cartesian3.fromDegrees(123.84125,41.338098, 130),
        billboard: {
          // 图像地址，URI或Canvas的属性
          image: require('@/assets/images/position2.png'),
          scale: 0.05,
        },
      });
      global.viewer.videoEntity = videoEntity
      setTimeout(() => {
        this.isVideoShow = true
      }, 1000);
    },
    closeVideo(){
      this.layerChcked.video_1 = false
      global.viewer.entities.remove(global.viewer.videoEntity)
      this.$refs.vueRef.pause();//暂停
      this.isVideoShow = false
    },
    flyToVideo_1(){
      global.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(123.84125,41.338098, 5000)
      })
    },
    // 矢量图层
    showShiliang(){
      const viewer = global.viewer
      const shiliang = new Cesium.UrlTemplateImageryProvider({
          url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
          minimumLevel: 3,
          maximumLevel: 18
      })
      global.shiliang = viewer.imageryLayers.addImageryProvider(shiliang)
    },
    removeShiliang(){
      global.viewer.imageryLayers.remove(global.shiliang)
      global.shiliang = null
    },
    flyToShiliang(){
      global.viewer.flyTo(global.viewer.tileset)
    },
    changeShiliang(){
      if(!this.layerChcked.layer_14){
        this.removeShiliang()
        return
      } 
      this.showShiliang()
    },
    changeChaoYang(){
      if(!this.layerChcked.layer_16){
        this.removeChaoYang()
        return
      }
      this.showChaoYang()
    },
    removeChaoYang(){
      global.viewer.scene.primitives.remove(window.chaoyang)
      window.chaoyang = null
    },
    showChaoYang(){
      const viewer = global.viewer
      const chaoyang = new Cesium.Cesium3DTileset({
        url: 'http://localhost:9003/model/tuBQTA59O/tileset.json',
      })
      window.chaoyang = chaoyang
      viewer.scene.primitives.add(chaoyang)
    },
    flyToChaoYang(){
      const viewer = global.viewer
      viewer.flyTo(window.chaoyang)
    },
    /**
     * @brief 返回线坐标数组 
     * @param {Array} points 经纬度坐标数组
     * @return {Array} polyline位置坐标信息
     */
     getPointArr(points){
      let pointArr=new Cesium.CallbackProperty(()=>{
        return new Cesium.Cartesian3.fromDegreesArray(points)
      },false)
      return pointArr
    },
    // 加范围线
    showLine(){
      // 线
      global.line1 = this.polyline('scopeLine-1',this.city,5,Cesium.Color.RED.withAlpha(1),true,100,true)   
      global.line2 = this.polyline('scopeLine-2',this.country,5,Cesium.Color.BLUE.withAlpha(1),true,100,true)
      global.line3 = this.polyline('scopeLine-3',this.pond,5,Cesium.Color.YELLOW.withAlpha(1),true,100,true)
      global.line4 = this.polyline('scopeLine-4',this.year_100,3,Cesium.Color.fromCssColorString('#e0ffff'),true,100,true)   
      global.line5 = this.polyline('scopeLine-5',this.year_200,3,Cesium.Color.fromCssColorString('#e0ffff'),true,100,true)   
      
      // 广告牌
      global.board1 = this.historyBillboard("bb-1",123.806561, 41.335535, 100,'#60cdad',5,3,true,50000,'太子河城市段',50,-30,'35px Helvetica',Cesium.Color.BLACK)
      global.board2 = this.historyBillboard("bb-2",124.052633, 41.354642, 100,'#60cdad',5,3,true,50000,'太子河农村段',100,-10,'35px Helvetica',Cesium.Color.BLACK)
      global.board3 = this.historyBillboard("bb-3",124.211404, 41.325775, 100,'#60cdad',5,3,true,50000,'观音阁水库段',100,10,'35px Helvetica',Cesium.Color.BLACK)
      this.flyToScopeLine()

      // 防洪标准文字
      global.board4 = this.addLabel("BB-4",123.637641,41.329291,0,'防洪年限100年一遇，设计流量6764立方米/秒','30px Helvetica',Cesium.Color.fromCssColorString('#8B3A3A	'),-40,-50,500000000)
      global.board5 = this.addLabel("BB-5",123.914356,41.268159,0,'防洪年限200年一遇，设计流量7867立方米/秒','30px Helvetica',Cesium.Color.fromCssColorString('#8B3A3A	'),80,10,500000000)

      // 溪湖桥
      global.xhqp = this.historyBillboard('xhqp',123.764835,41.267505,0,Cesium.Color.fromCssColorString('#00ffff'),5,3,true,5000000,'溪湖桥',0,0,'30px Helvetica',Cesium.Color.fromCssColorString('#000080'))
    },
    removeScoprLine(){
      const viewer = global.viewer
      viewer.entities.remove(global.line1)
      viewer.entities.remove(global.line2)
      viewer.entities.remove(global.line3)
      viewer.entities.remove(global.line4)
      viewer.entities.remove(global.line5)
      viewer.entities.remove(global.board1)
      viewer.entities.remove(global.board2)
      viewer.entities.remove(global.board3)
      viewer.entities.remove(global.board4)
      viewer.entities.remove(global.board5)
      viewer.entities.remove(global.board5)
      viewer.entities.remove(global.xhqp)
      global.line1 = null
      global.line2 = null
      global.line3 = null
      global.line4 = null
      global.line5 = null
      global.board1 = null
      global.board2 = null
      global.board3 = null
      global.board4 = null
      global.board5 = null
      global.xhqp = null
    },
    changeScopeLine(){
      if(!this.layerChcked.scopeLine){
        this.removeScoprLine()
        return
      }
      this.showLine()
    },
    flyToScopeLine(){
      const viewer = global.viewer
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(123.950082,41.291843,80000),
        // orientation
      })
    },
    // 展示历史工程面板
    showHistory(){
      this.isHistoryProjectShow=!this.isHistoryProjectShow
      this.islayerControlerShow=false
      this.isVisualShow= false
      this.isMeasureToolsShow=false
      this.isToushiShow=false
      this.isShowRain=false
      this.isShowContrast=false
      this.isgisToolsShow=false
      this.isComputedLineShow=false
      this.isWaShow=false
    },
    // 关闭历史工程
    hiddenHistoryProject(){
      this.isHistoryProjectShow=false
    },
    sendMessage(msg,type) {
      this.$notify({
        title: msg,
        position: 'top-right',
        type: type,
        offset: 200
      });
    },
    showHistoryLine(){
       if(!localStorage.getItem('memory')){
         this.sendMessage('请先登录','warning')
         return
       }
      this.isOldLineShow = !this.isOldLineShow
    },
    closeHistory(){
      this.isOldLineShow = false
    },
  }
}
</script>

<style scoped lang="less">
.big-box{
  position: relative;
  height: 100%;
}
.controler-container{
  width: 3.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 99;
}
.controler-icon{
  display:flex;
  height: 46vh;
  background-color: rgba(0, 0, 0, .6);
  /* opacity: 0.6; */
  border-radius: .5rem;
  position: absolute;
  top: 25vh;
  left: 1vw;
  color: #60cdad;
  flex-direction: column;
  justify-content: space-around;
  font-size: 3.5vh;
  border: 1px solid #60cdad;
  cursor: pointer;
  margin-left: 1vw;
  width: 2.5vw;
}
.controler-measure div{
  display: block;
  height: 3.125rem;
  font-size: .9375rem;
  color: black;
  background-color: #fff;
  opacity: 1;
  word-wrap: break-word;
  border-bottom: 1px solid black;
  cursor: pointer;
}
.controler-measure{
  width: 3.1rem;
  position: absolute;
  border: 1px solid black;
  z-index: 99;
  left: 1.8rem;
  top:-22rem;
  border-bottom: none;
}
.facilities{
  position: absolute;
  left: 95vw;
  top: 28vh;
  width: 3vw;
  height: 18vh;
  background-color: rgba(0, 0, 0, .6);
}
.facilities i, .water-level i{
  margin-top: .3125rem;
  color: #60cdad;
  font-size: 1.1875rem;
}
.facilities p, .water-level p{
  margin-top: 1vh;
  font-size: 2.5vh;
  writing-mode: tb-rl;
  text-align: center;
  color: #fff;
  letter-spacing: 1vh;
  line-height: 2vh;
  margin-left: 1vw;
}
.water-level{
  position: absolute;
  left: 95vw;
  top: 49vh;
  width: 3vw;
  height: 18vh;
  background-color: rgba(0, 0, 0, .6);
  color: #fff;
}
/* 弹出层样式 */
.el-checkbox__label {
  display: inline-block;
  padding-left: 0;
  line-height: 19px;
  font-size: 14px;
}
.layer-controler-container{
  padding-bottom: 1vh;
  position: absolute;
  top: 23vh;
  left: 6vw;
  z-index: 99;
  width: 17vw;
  height: 60vh;
  border: 2px solid #60cdad;
  background-color:rgba(0, 0, 0, .3);
  .layer-controler-container-top{
    .top{
      padding: 0 0.5vh 0 1.5vh;
      color:#60cdad;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #60cdad;
      box-sizing: border-box;
      height: 5vh;
    }
    
  }
  .bottom{
    overflow-y: scroll;
    margin-top: .5vh;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, alpha);
    align-items: flex-start;
    height: 54.5vh;
    .layer-items{
      border-bottom: 1px solid gray;
      width: 16vw;
      .layer-items-top{
        font-size: 1.6vh;
        color: white;
        letter-spacing: 1px;
        /*border-bottom: 1px solid gray;*/
        text-align: left;
        margin-left: 2vh;
        /*padding-bottom: 0.8vh;*/
        width: 12vw;
        margin-bottom: 1vh;
        padding-top: 1vh
      }
    }
  }
  .bottom::-webkit-scrollbar {
    width: 4px;
  }
  .bottom::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    opacity: 1;
    background: rgba(96,205,173,1);
  }
  .bottom::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    border-radius:0;
    background: rgba(0,0,0,.8);
  }
  
}
.layer-item-icon{
  color: #fff;
  margin-left: 1.5vw;
  margin-bottom: 1vh;
}

.el-icon-document-copy{
  margin-left: 0.5vw;
  margin-right: 0.3vw;
}
.el-icon-close{
  cursor: pointer;
}
/* 图层item项 */
.layer-item-text{
  font-size: 1.5vh;
  color: #fff;
  margin-left: 0.2vw;
  cursor: pointer;
  text-align: left
}
.layer-item{
  display: flex;
}
/* 飞行漫游 */
.do-fly{
  position: absolute;
  left: 6vw;
  top: 25vh;
  background-color: rgba(0, 0, 0, 0.4);
  /* height: 42vh !important; */
  z-index: 999;
  width: 16vw;
  box-sizing: border-box;
  border: 1px solid #60cdad;
  width: auto;
  padding: 0 2vh 3vh 2vh;
  height: auto;
  .fly-top{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #60cdad;
    color: #fff;
    height: 3vh;
    font-size: 1.8vh;
    padding: 1vh 1vh 0 1vh;
    padding-left: 1vw;
    color: #60cdad;
  }
  .angle{
    color: #fff !important;
    margin-top:2vh;
    .fly-choose{
      display: flex;
      justify-content: space-around;
    }
    .choose-item{
      margin-top: 1vh;
      .label-span{
        font-size: 1.7vh;
        margin-left: 1.5vw;
        display: flex;
      }
      .fly-bottom{
        text-align: left;
        padding-left: 1.5vw;
        .labels{
          font-size: 1vh;
          color: #fff;
          margin-top: 1vh;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: left;
        }
      }
    }
    .choose-speed{
      margin-top: 2vh;
      .label-span{
        font-size: 1.7vh;
      }
      .el-radio[data-v-64ed9dca] {
        color: #d3d3d3;
        font-weight: 400;
        white-space: nowrap;
        outline: 0;
        margin: 1vh 2vh;
    }
    } 
    .draw{
      font-size: 1vh;
      line-height: 0vh;
      vertical-align: middle;
      /* margin-top: 2vh; */
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      /* padding-left: 1.5vw; */
      width: 74%;
      margin: 2vh auto 0 auto;
    }
  }
.el-radio {
  color: #d3d3d3;
  font-weight: 400;
  white-space: nowrap;
  outline: 0;
  margin-right: 30px;
  margin-top: 1vh
}
  .el-button{
    height: 2vh;
    text-align: center;
    font-size: 1vh;
    line-height: 0vh;
    vertical-align: middle;
    margin-right: 2vh;
    margin-top: 1vh;
    /* margin-left: 0 !important; */
    margin: 1vh auto 0 auto;
  }
}
.height{
  width: 30%;
  height: 20px;
  margin-right: 26px;
  /*margin-left: -10px;*/
}
/* 透视的分析 */
.toushi-box{
  position: absolute;
  top: 25vh;
  left: 6vw;
  border: 1px solid #60cdad;
  z-index: 999;
  background-color: rgba(0,0,0,.4);
  height: 14vh;
  width: 11vw;
  color: rgba(255,255,255,.9);
}
.toushi-top{
  margin-top: 1vh;
  border-bottom: 1px solid#60cdad;
  padding-bottom: 1vh;
  color: #60cdad;
  font-size: 0.7vh;
}
.choose-box{
  margin-top: 1.2vh;
  font-size: 1.6vh;
}
.clear-all{
  margin-top: 1.5vh;
  font-size: 1.6vh;
}
.clear-all:hover{
  color: #60cdad;
  cursor: pointer;
}
.choose-box:hover{
  color: #60cdad;
  cursor: pointer;
}
.toushi-span{
  font-size:1.8vh;
  margin-right: 5vw;
}
/* 场景特效 */
.weather{
  position: absolute;
  top: 25vh;
  left: 6vw;
  width: 14vw;
  height: 13vw;
  border: 1px solid #60cdad;
  z-index: 999;
  background-color: rgba(0, 0, 0, .6);
  color: rgba(255,255,255,.9);
  font-size: 1.8vh;
}
.weather-top{
  margin-top: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid #60cdad;
  color: #60cdad;
}
.weather-wenzi{
  margin: 5vh 8vw 1vh 0;
}
.weather-bottom{
  margin-top: 1vh;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 1.6vh;
}
.weather-item{
  margin: 1vw 0.8vw 1vw 0.8vw;
  width: 27%;
  height: 0vh;
  font-size: 1.5vh;
}
#weather-item-3{
  margin-left: 0;
}
.weather-clear{
  font-size: 1.6vh;
  margin-top: 1vh;
  margin-left: -9.7vw;
}
.weather-xiaoguo{
  margin-left: 0.1vw;
}
.weather-item:hover{
  color: #60cdad;
  cursor: pointer;
}
/* 卷帘对比 */
.contrast{
  position: absolute;
  top: 27vh;
  left: 6vw;
  border: 1px solid #60cdad;
  z-index: 999;
  width: 16vw;
  height: 21vh;
  background-color: rgba(0, 0, 0, .6);
  color: rgba(255,255,255,.9);
}
.contrast-top{
  padding: 1vh 1vh 1vh 1vh;
  border-bottom: 1px solid #60cdad;
  font-size: 1.8vh;
  color: #60cdad;
}
.contrast-wenzi{
  margin-right: 9vw;
}
.contrast-bottom{
  display: flex;
  flex-direction: column;
  font-size: 1.5vh;
}
.el-option{
  height: 2vh;
  width: 8vw;
}
.contrast-bottom-item{
  margin-top: 3vh;
}
/* slider滑块 */
#slider {
  position: absolute;
  left: 50%;
  top: 0;
  background-color: #D3D3D3;
  width: 5px;
  height: 100vh;
  z-index: 9999;
  display: none;
}
#slider:hover {
  cursor: ew-resize;
}
/* gis工具箱 */
.gis-tools{
  position: absolute;
  top: 25vh;
  left: 6vw;
  width: 17vw;
  height: 29vh;
  border: 1px solid #60cdad;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  .gis-tools-top{
    height: 10%;
    border-bottom: 1px solid #60cdad;
    padding: 0.8vh 0.5vh 0.8vh 0.8vh;
    color: #60cdad;
    display: flex;
    justify-content: space-between;
    text-align: center;
    i{
      text-align: center;
    }
  }
  .gistool-bottom{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    color: #fff;
    padding-top: 3vh;
    font-size: 1.5vh;
    .gistool-item{
      margin: 1vh 0 1vh 0;
      width: 30%;
    }
    .gistool-item:hover{
      color: #60cdad;
      cursor: pointer;
    }
  }
}
// 等高线
.computedLine{
  position: absolute;
  top: 25vh;
  left: 6vw;
  width: 17vw;
  height: 17vh;
  border: 1px solid #60cdad;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  .computedLine-top{
    height: 10%;
    border-bottom: 1px solid #60cdad;
    padding: 0.8vh 0.5vh 1.8vh 0.8vh;
    color: #60cdad;
    display: flex;
    justify-content: space-between;
    text-align: center;
    i{
      text-align: center;
    }
  }
  .computedLine-bottom{
    // height: 60%;
    color: #fff;
    font-size: 1.6vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1vw 0 3vw;
    margin-top: 1.5vh;
    input{
      width: 40%;
    }
  }
  .computedLine-btn{
    display: flex;
  }
  .computedLine-btn-1{
    margin-top: 2.5vh;
    color: rgba(255, 255, 255, 1.8);
    text-align: center;
    margin-left: 2.8vw;
    font-size: 1.6vh;
    border: 1px solid #60cdad;
    width: 20%;
    height: 3vh;
    /* padding-top: 0.5vh; */
    /* vertical-align: middle; */
    line-height: 3vh;
  }
  .computedLine-btn-1:hover{
    border: 1px solid #fff;
    color: #60cdad;
    cursor: pointer;
  }
}
#echarts {
  position: absolute;
  width: 30vw;
  height: 30vh;
  background-color: rgba(0,0,0,.5);
  z-index: 999;
  top: 32vh;
  left: 5vw;
  display: flex;
  i{
    width: 10%;
    font-size: 1vh;
  }
}
.closePoXiang{
  position: absolute;
  width: 3vw;
  height: 3vh;
  font-size: 3vh;
  color: #ffffff;
  z-index: 999;
  top: 32.5vh;
  left: 32.4vw;
  z-index: 9999
}
.closePoXiang:hover{
  cursor: pointer;
}
// 缓冲分析
.analyse{
  position: absolute;
  top: 26vh;
  left: 6vw;
  z-index: 999;
  width: 15vw;
  height: 12vh;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid #60cdad;
  .analys-top{
    display: flex;
    justify-content: space-between;
    padding: 0.8vh 0.2vw 0.8vh 0.5vw;
    border-bottom: 1px solid #60cdad;
    span{
      font-size: 1.7vh;
      color: #60cdad;
    }
    .el-icon-close:hover{
      cursor: pointer;
    }
  }
  .analyse-bottom{
    padding-top: 1.5vh;
    font-size: 1.5vh;
    .analyse-input{
      width: 5vw;
      margin-left: 1vw;
      margin-right: 0.5vw;
      height: 1vh !important;
      .analyse-input__inner{
        height: 28px;
      }
    }
  }
}
.fut-fill-tools {
  z-index: 999;
  position: absolute;
  margin: 1vh;
  padding: 1vh;
  z-index: 10;
  color: white;
  border: 1px solid #242323;
  border-radius: 5px;
  background-color: rgba(75, 74, 74, 0.8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  top: 25vh;
  left: 5vw;
  font-size: 1.5vh;
  i{
    margin-left: 14vw;
    margin-bottom: 1vh  
  }
  .tools-param {
    display: flex;
    margin-bottom: 1vh;
    .el-input {
      width: 4vw;
      display: inline-block;
      margin-right: 0.5vw;    
    }
  }
  button {
    width: 97%;
  }
  .tool-result {
    color: white;
    span {
      display: flex;
      width: 14vw;
      margin: 1vh 0;
      justify-content: flex-end; 
      // text-align: left;     
    .el-input {
        width: 7vw;
        display: inline-block;
        margin-left: 1.5vh;
      }
    }
  }
}
// 视频
.video-player{
  z-index: 999;
    position: absolute;
    left: 23vw;
    top: 19vh;
    width: 69vw;
    height: 77vh;
  background-color: rgba(0,0,0,.5);
  .video-top{
    text-align: right;
    padding-right: 5px;
    padding-top: 5px;
    color: #fff;
    font-size: 2.5vh;
    i{
      cursor: pointer;
    }
  }
  .videos{
    video{
      // width: 90vw;
      height: 73vh;
    }
  }
}
</style>